<template>
  <div class="chart">
    <div class="topInfo">
      <el-card shadow="hover">
        <div class="bd">{{ dataList.increment_users }}</div>
        <div class="title">今日新增用户</div>
      </el-card>
      <el-card shadow="hover">
        <div class="bd">{{ dataList.total_users }}</div>
        <div class="title">总用户量</div>
      </el-card>
      <el-card shadow="hover">
        <div class="bd">{{ dataList.increment_questions }}</div>
        <div class="title">新增试题</div>
      </el-card>
      <el-card shadow="hover">
        <div class="bd">{{ dataList.total_questions }}</div>
        <div class="title">总试题量</div>
      </el-card>
      <el-card shadow="hover">
        <div class="bd">{{ dataList.total_done_questions }}</div>
        <div class="title">总刷题量</div>
      </el-card>
      <el-card shadow="hover">
        <div class="bd">{{ dataList.personal_questions }}</div>
        <div class="title">刷题量</div>
      </el-card>
    </div>
    <el-card shadow="never">
      <div ref="chart" class="main" style="width: auto; height: 500px" />
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      dataList: {}
    }
  },
  async created() {
    this.getUserInfo()
    this.getDataTitle()
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    async getUserInfo() {
      const res = await this.$api.system.info()
      this.$store.commit('user/SET_USER_INFO', res.data)
    },
    async getDataTitle() {
      const res = await this.$api.data.dataTitlePost()
      this.dataList = res.data
    },
    async echartsInit() {
      const res = await this.$api.data.dataStatisticsPost()
      echarts.init(this.$refs.chart).setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '数据详情',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '26',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: res.data
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  .el-card {
    border-radius: 20px;
    border-color: #c0c0c0;
  }
  .topInfo {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .el-card {
      display: flex;
      width: 15%;
      align-items: center;
      justify-content: center;
      .bd {
        display: flex;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-size: 28px;
      }
      .title {
        margin-top: 10px;
        text-align: center;
        font-size: 16px;
      }
    }
  }
}
</style>
